<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <!-- 搜索框 -->
            <el-form-item>
              <el-input
                @keyup.enter="handleFilter"
                style="width: 200px"
                placeholder="根据用户名搜索"
                class="filter-item"
                v-model="requestParameters.title"
              ></el-input>
              <el-button
                style="margin-left: 10px"
                class="filter-item"
                size="small"
                @click="resetForm"
                >清除</el-button
              >
              <el-button
                class="filter-item"
                size="small"
                type="primary"
                @click="handleFilter"
                >搜索</el-button
              >
              <el-button
                class="filter-item fr"
                size="small"
                style="margin-left: 10px"
                @click="handleCreate"
                type="success"
                icon="el-icon-edit"
                >新增权限组</el-button
              >
            </el-form-item>
          </div>
        </el-form>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据 -->
        <el-table
          :header-cell-style="tableHeaderCellStyle"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          highlight-current-row
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column align="center" label="用户名" prop="title">
            <template slot-scope="{ row }">
              <span>{{ row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="日期"
            sortable
            prop="create_date"
          >
            <template slot-scope="{ row }">
              <span>{{ row.create_date | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <!-- 按钮  -->
          <el-table-column align="center" :label="$t('table.actions')">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                circle
                style="
                  color: #409eff;
                  background: #ecf5ff;
                  border-color: #b3d8ff;
                "
                size="medium "
                @click="handleUpdate(scope.row)"
              ></el-button>
              <el-button
                v-if="scope.row.status != 'deleted'"
                size="medium "
                style="
                  color: #f56c6c;
                  background: #fef0f0;
                  border-color: #fbc4c4;
                "
                icon="el-icon-delete"
                circle
                @click="removeUser(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <PageTool
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="total"
            @pageChange="pageChange"
            @pageSizeChange="pageSizeChange"
          ></PageTool>
        </div>
        <!-- end -->
        <!-- 新增标签弹层 -->
          <!-- :node="node" -->
        <permissionsAdd
          ref="addPermission"
          :showDialog.sync="showDialog"
          :ruleInline="ruleInline"
          @getAdd="getList"
        ></permissionsAdd>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/permissions'
import PageTool from './../components/page-tool'
import permissionsAdd from '../components/permissions-add.vue'
// import store from '@/store'

export default {
  name: 'base-permissions',
  components: {
    permissionsAdd,
    PageTool
  },
  data () {
    return {
      dataList: [], // 权限组列表
      total: null, // 条数
      listLoading: false,
      showDialog: false,
      alertText: '', // 弹框提示
      requestParameters: {
        page: 1,
        pagesize: 10,
        title: ''
      },
      ruleInline: {
        // 表单验证
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      },
      node: []
    }
  },
  // 创建完毕状态
  async created () {
    // 读取数据
    this.getList()
    // const res = await store.dispatch('GetUserInfo')
    // console.log(res)
  },
  methods: {
    // 获取列表数据
    async getList () {
      this.listLoading = true
      const { data } = await list(this.requestParameters)
      //   const res = await simple(this.requestParameters)
      //   console.log(data)
      //   console.log(res)
      this.dataList = data.list
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getList()
    },
    // 清除
    resetForm () {
      this.requestParameters = {
        page: 1,
        pagesize: 10,
        title: ''
      }
      this.getList()
    },
    // 新增用户
    async handleCreate () {
      // 把子组件的渲染拿到这来 解决上次页面会遗留的bug
      await this.$refs.addPermission.getMenuList()
      this.showDialog = true
    },
    // 修改
    async handleUpdate (node) {
      await this.$refs.addPermission.getMenuList()
      await this.$refs.addPermission.getPerDetail(node)
      this.showDialog = true
    },
    // 删除
    async removeUser (id) {
      try {
        await this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示')
        await remove(id)
        this.$message.success('删除成功')
        await this.getList()
        // 当前页面删完了调到上一页
        if (this.dataList.length === 0) {
          this.requestParameters.page -= 1
          this.getList()
        }
      } catch (error) {
        this.$message.error(error?.message ? error.message : '取消删除')
      }
    },
    // 分页器
    pageChange (page) {
      this.requestParameters.page = page
      this.getList()
    },
    // 分页器
    pageSizeChange (pagesize) {
      this.requestParameters.pagesize = pagesize
      this.requestParameters.page = 1
      this.getList()
    },
    // 给表头加一个样式
    tableHeaderCellStyle () {
      return ' background-color: #fafafa; border-bottom: 2px solid #e8e8e8;'
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin-bottom: 10px;
  margin-top: -25px;
}

.pagination {
  margin-top: 10px;
  // text-align: right;
}
</style>

<style lang="scss">
.el-input--medium .el-input__inner {
  height: 30px;
}

.el-table th {
  background-color: red;
}

.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}

.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}

.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
